<template>
  <!-- 此处为了让reload时不自动滚动到顶部，需要设置auto-clean-list-when-reload和auto-scroll-to-top-when-reload为false，即在reload时关闭自动清空数组和自动滚动到顶部 -->
  <z-paging
    ref="paging"
    v-model="doctorList"
    :scroll-with-animation="true"
    :default-page-size="queryParams.page_size"
    :auto-clean-list-when-reload="false"
    :auto-scroll-to-top-when-reload="false"
    @query="handlerPullRefreshAndMore"
    @scroll="handleScroll"
    class="index-container"
  >
    <template #top>
      <!-- 自定义头部组件开始 -->
      <CustomHead />
      <!-- 自定义头部组件结束 -->
    </template>

    <!-- 骨架屏 -->
    <uv-skeletons :loading="isShowSkeleton" :skeleton="skeleton"></uv-skeletons>

    <view v-if="!isShowSkeleton">
      <!-- 导航区域开始 -->
      <Nav />
      <!-- 导航区域结束 -->

      <!-- 轮播图组件开始 -->
      <TridentSwiper :banners="bannerList" />
      <!-- 轮播图组件结束 -->

      <!-- 小程序中直接修改组件style为position: sticky;无效，需要在组件外层套一层view -->
      <view class="tabs-wrap" :style="{ top: safeAreaInsetTop + 'px' }">
        <!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
        <z-tabs bar-height="4rpx" active-color="#27BA9B" :list="tabList" @change="handleChangeTab" />
      </view>

      <List :doctorList="doctorList"/>
    </view>

    <!-- 加载更多提示 -->
    <template #loadingMoreNoMore>
      <view :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }" class="no-more">我也是有底线的！</view>
    </template>
  </z-paging>
  <!-- 返回顶部 -->
  <TridentBackTop @backTop="backTop" :isShowBackTop="isShowBackTop"/>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { onShow } from "@dcloudio/uni-app"


// 导入数据类型
import type { Banner } from "@/types/home"

// 导入自定义组件
import CustomHead from './componets/CustomHead.vue'
import Nav from './componets/Nav.vue'
import List from './componets/List.vue'


import { reqGetBannersAPI } from '@/apis/home'
import { reqGetDoctorListAPI } from '@/apis/doctor'
import type { Doctor, DoctorListParams } from '@/types/doctor'



// ----------------- 定义全局变量开始 -----------------
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
const safeAreaInsetTop = safeAreaInsets && safeAreaInsets.top + 82

// 医生列表相关变量
const paging = ref()
const doctorList = ref<Doctor[]>([])
const queryParams = ref<DoctorListParams>({
  page: 1,
  page_size: 10
})

const pageTotal = ref(0)
// ----------------- 定义全局变量结束 -----------------



// ------------------- 页面显示开始 -------------------
onShow(async () => {
  isShowSkeleton.value = true
  await Promise.all([
    getBannerList(),
  ])

  isShowSkeleton.value = false
})
// ------------------- 页面显示结束 -------------------



// ----------------- 定义骨架变量开始 -----------------
// 定义是否显示骨架
const isShowSkeleton = ref(false)

// 定义骨架参数
const skeleton = reactive([
    // 导航区域
    200,
    {
      type: 'flex',
      num: 1,
      style: 'padding:0 10rpx;',
      children: [
        {
          type: 'custom',
          num: 1,
          style: 'width: 150rpx;height: 110rpx;marginRight: 85rpx;marginLeft: 50rpx;'
        },
        {
          type: 'custom',
          num: 1,
          style: 'width: 150rpx;height: 110rpx;marginRight: 85rpx;'
        },
        {
          type: 'custom',
          num: 1,
          style: 'width: 150rpx;height: 110rpx;marginRight: 85rpx;'
        }
      ]
    },
    20,
    {
      type: 'flex',
      num: 1,
      style: 'padding:0 10rpx;',
      children: [
        {
          type: 'custom',
          num: 1,
          style: 'width: 150rpx;height: 35rpx;marginRight: 85rpx;marginLeft: 50rpx;'
        },
        {
          type: 'custom',
          num: 1,
          style: 'width: 150rpx;height: 35rpx;marginRight: 85rpx;'
        },
        {
          type: 'custom',
          num: 1,
          style: 'width: 150rpx;height: 35rpx;marginRight: 85rpx;'
        }
      ]
    },
    40,
    
    {
      type: 'flex',
      num: 1,
      style: 'padding:0 10rpx;',
      children: [
        {
          type: 'custom',
          num: 1,
          style: 'width: 110rpx;height: 110rpx;marginRight: 85rpx;marginLeft: 20rpx;'
        },
        {
          type: 'custom',
          num: 1,
          style: 'width: 110rpx;height: 110rpx;marginRight: 85rpx;'
        },
        {
          type: 'custom',
          num: 1,
          style: 'width: 110rpx;height: 110rpx;marginRight: 85rpx;'
        },
        {
          type: 'custom',
          num: 1,
          style: 'width: 110rpx;height: 110rpx;'
        }
      ]
    },
    20,
    {
      type: 'flex',
      num: 1,
      style: 'padding:0 10rpx;',
      children: [
        {
          type: 'custom',
          num: 1,
          style: 'width: 110rpx;height: 35rpx;marginRight: 85rpx;marginLeft: 20rpx;'
        },
        {
          type: 'custom',
          num: 1,
          style: 'width: 110rpx;height: 35rpx;marginRight: 85rpx;'
        },
        {
          type: 'custom',
          num: 1,
          style: 'width: 110rpx;height: 35rpx;marginRight: 85rpx;'
        },
        {
          type: 'custom',
          num: 1,
          style: 'width: 110rpx;height: 35rpx;'
        }
      ]
    },

    // 轮播图区域
    40,
    {
      type: 'custom',
      num: 1,
      style: 'width: 96%;height: 320rpx;margin: 0 auto;'
    },

    // 标签区域
    30,
    {
      type: 'flex',
      num: 1,
      style: 'padding:0 10rpx;',
      children: [
        {
          type: 'custom',
          num: 1,
          style: 'width: 120rpx;height: 60rpx;marginLeft: 50rpx;'
        },
        {
          type: 'custom',
          num: 1,
          style: 'width: 120rpx;height: 60rpx;marginLeft: 50rpx;'
        },
        {
          type: 'custom',
          num: 1,
          style: 'width: 120rpx;height: 60rpx;marginLeft: 50rpx;'
        },
        {
          type: 'custom',
          num: 1,
          style: 'width: 120rpx;height: 60rpx;marginLeft: 50rpx;'
        }
      ]
    },

    // 内容区域
    40,
    {
      type: 'flex',
      num: 1,
      style: 'padding: 0 20rpx',
      children: [
        {
          type: 'custom',
          num: 1,
          style: 'width: 120rpx;height: 120rpx;border-radius: 100%;marginRight: 30rpx',
        },
        {
          type: 'line',
          num: 2,
          style: ['height:50rpx; width: 140rpx', 'height:60rpx']
        }
      ]
    },
    15,
    {
      type: 'flex',
      num: 1,
      style: 'padding: 0 20rpx',
      children: [
        {
          type: 'custom',
          num: 1,
          style: 'width: 700rpx;height: 65rpx;',
        },
      ]
    },
    15,
    {
      type: 'flex',
      num: 1,
      style: 'padding: 0 20rpx;',
      children: [
        {
          type: 'custom',
          num: 1,
          style: 'width: 220rpx;height: 220rpx;marginRight: 18rpx;',
        },
        {
          type: 'custom',
          num: 1,
          style: 'width: 220rpx;height: 220rpx;marginRight: 18rpx;',
        },
        {
          type: 'custom',
          num: 1,
          style: 'width: 220rpx;height: 220rpx;marginRight: 18rpx;',
        },
      ]
    },
])
// ----------------- 定义骨架变量结束 -----------------



// ------------------ tab栏功能开始 ------------------
// 当前选择的tab下标
const currentIndex = ref<number>(0)

// tab数据
const tabList = reactive(['关注', '推荐', '减脂', '饮食'])

// 处理选中tab
const handleChangeTab = (index: number) => {
  currentIndex.value = index
  queryParams.value.page = 1
  // doctorList.value = []
  // 当tab切换或搜索时，可以通过paging.value.reload()刷新整个列表
  paging.value.reload()
}

// ------------------ tab栏功能结束 ------------------



// ----------------- 返回顶部功能开始 -----------------
// 定义是否显示返回顶部
const isShowBackTop = ref(false)

// 返回顶部
const backTop = () => {
  paging.value.scrollToTop()
}

// 当滚动触发时，调用事件用于显示、隐藏返回顶部图标
const handleScroll = (e:any) => {
  isShowBackTop.value = e.detail.scrollTop > 300 ? true : false
}
// ----------------- 返回顶部功能结束 -----------------



// -------------- 加载更多 + 下拉刷新开始 -------------
const handlerPullRefreshAndMore = (pageNo: number, pageSize: number) => {
  queryParams.value.page = pageNo
  getDoctorList()
}
// -------------- 加载更多 + 下拉刷新结束 -------------



// ---------------- 获取轮播图数据开始 ----------------
// 轮播图列表
const bannerList = ref<Banner[]>([])

const getBannerList = async () => {
  const result = await reqGetBannersAPI({page_size: 4, type: 3, sort_field: 'sort', sort_type: 'asc'})
  bannerList.value = result.data.banners != null ? result.data.banners : []
}
// ---------------- 获取轮播图数据结束 ----------------



// ----------------- 获取医生数据开始 -----------------
const getDoctorList = async () => {
  const result = await reqGetDoctorListAPI(queryParams.value)
  pageTotal.value = result.data.page_total
  const doctors = result.data.doctors != null ? result.data.doctors : []
  doctorList.value
  paging.value.complete(doctors)
}
// ----------------- 获取医生数据结束 -----------------
</script>

<style lang="scss">
.index-container {
  padding-bottom: 10rpx;
  .tabs-wrap {
    z-index: 100;
    position: sticky;
    border-bottom: 2rpx solid gainsboro;
    /* #ifdef MP-WEIXIN */
    margin-top: 30rpx;
    /* #endif */
  }
  // 没有更多区域
  .no-more {
    text-align: center;
    margin-top: 20rpx;
    padding-bottom: 20rpx;
    color: #ccc;
    &::before {
      content: '-------------';
      margin-right: 10rpx;
    }
    &::after {
      content: '-------------';
      margin-right: 10rpx;
    }
  }
}
</style>